<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Event Ticket Listings</title>
    <!-- Bootstrap CSS -->
    <!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" /> -->
    <link rel="stylesheet" href="https://cdn.staticfile.net/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.net/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.net/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.net/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <style>
        .event-card {
            border: 2px solid #9b59b6;
            padding: 20px;
            margin-bottom: 20px;
        }

        .ticket-type {
            background-color: rgb(160 200 108);
            padding: 30px;
            text-align: center;
            position: relative;
            margin-bottom: 60px;
            border-radius: 8px;
            /* 添加虚线边框 */
            border: 1px dashed #000;
        }

        .price-tag {
            position: absolute;
            top: -10px;
            left: 50%;
            transform: translateX(-50%);
            background-color: white;
            padding: 5px 10px;
            border: 1px solid #ccc;
            font-weight: bold;
            border-radius: 4px;
        }

        .legend {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background-color: white;
            padding: 10px;
            border: 1px solid #ccc;
            z-index: 100;
        }

        /* 卡片间距 */
        .list-group-item+.list-group-item {
            margin-top: 10px;
        }

        .box {
            background-image: url(img/bj.png);
            padding: 120px;
            background-size: 1200px;
            background-repeat: no-repeat;
            background-position-x: -250px;
            background-position-y: -60px;
        }
    </style>
</head>

<body>

    <div class="container mt-5">
        <div class="row">
            <!-- 左侧票种信息 -->
            <div class="col-md-6 box" id="ticketTypesContainer"></div>

            <!-- 右侧票的列表 -->
            <div class="col-md-6">
                <!-- 顶级列表 -->
                <div class="card mb-4">
                    <div class="card-header">Top Listings</div>
                    <div class="card-body" id="topListingsContainer">
                        <div class="d-flex justify-content-center align-items-center" id="loadingTop">
                            <div class="spinner-border text-primary" role="status">
                                <span class="visually-hidden">Loading...</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 其它可用列表 -->

            </div>
        </div>

        <!-- 图例 -->
        <div class="legend">Legend</div>

        <!-- 模态框 -->
        <div class="modal fade" id="registrationModal" tabindex="-1" role="dialog"
            aria-labelledby="registrationModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="registrationModalLabel">个人信息与团队报名表</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <form id="registrationForm">
                            <!-- 个人信息 -->
                            <div class="card mb-4">
                                <div class="card-header">
                                    <h5>个人资料</h5>
                                </div>
                                <div class="card-body">
                                    <div class="form-row">
                                        <div class="form-group col-md-6">
                                            <label for="name">姓名</label>
                                            <input type="text" class="form-control" id="name" placeholder="输入姓名"
                                                required>
                                        </div>
                                        <div class="form-group col-md-6">
                                            <label for="idNumber">身份证号码</label>
                                            <input type="text" class="form-control" id="idNumber" placeholder="输入身份证号码"
                                                required>
                                        </div>
                                    </div>
                                    <div class="form-row">
                                        <div class="form-group col-md-6">
                                            <label for="phone">联系电话</label>
                                            <input type="text" class="form-control" id="phone" placeholder="输入联系电话"
                                                required>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- 团队信息 -->
                            <div class="card mb-4">
                                <div class="card-header">
                                    <h5>团队信息</h5>
                                </div>
                                <div class="card-body">
                                    <div class="form-group">
                                        <label for="teamName">队伍名称</label>
                                        <input type="text" class="form-control" id="teamName" placeholder="输入队伍名称"
                                            required>
                                    </div>
                                    <div id="members">
                                        <div class="member-form">
                                            <h6>队员信息</h6>
                                            <div class="form-row">
                                                <div class="form-group col-md-4">
                                                    <label for="memberName">姓名</label>
                                                    <input type="text" class="form-control" placeholder="输入姓名" required>
                                                </div>
                                                <div class="form-group col-md-4">
                                                    <label for="memberId">身份证号码</label>
                                                    <input type="text" class="form-control" placeholder="输入身份证号码"
                                                        required>
                                                </div>
                                                <div class="form-group col-md-4">
                                                    <label for="memberPhone">联系电话</label>
                                                    <input type="text" class="form-control" placeholder="输入联系电话"
                                                        required>
                                                </div>
                                            </div>
                                            <div class="form-row">
                                                <div class="form-group col-md-4">
                                                    <label for="memberRole">身份</label>
                                                    <select class="form-control" required>
                                                        <option value="">选择身份</option>
                                                        <option>向导</option>
                                                        <option>副向导</option>
                                                        <option>客户</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <button type="button" class="btn btn-secondary mb-3"
                                        onclick="addMember()">添加队员</button>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" form="registrationForm" class="btn btn-primary">提交</button>
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <script src="js/request.js"></script>
    <!-- jQuery CDN -->
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

    <!-- Bootstrap Bundle JS (包含 Popper) -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

    <script>
        // 假设的数据结构
        var data = {
            ticketTypes: [
                { type: 'S SEATS', price: '$376' },
                { type: 'R SEATS', price: '$407' }
            ],
            topListings: [
                { seatType: 'S Seats', soldDate: 'Sold 5 days ago', oldPrice: '$516', newPrice: '$376 each', note: '2 tickets together' },
                { seatType: 'S Seats', soldDate: 'Sold 5 days ago', oldPrice: '$516', newPrice: '$376 each', note: '2 tickets together' },
                { seatType: 'S Seats', soldDate: 'Sold 5 days ago', oldPrice: '$516', newPrice: '$376 each', note: '2 tickets together' },
                { seatType: 'S Seats', soldDate: 'Sold 5 days ago', oldPrice: '$516', newPrice: '$376 each', note: '2 tickets together' },
                { seatType: 'S Seats', soldDate: 'Sold 5 days ago', oldPrice: '$516', newPrice: '$376 each', note: '2 tickets together' }
            ],
            otherListings: []
        };
        function addMember() {
            const memberForm = document.querySelector('.member-form').cloneNode(true);
            // 清空新克隆的表单内容
            const inputs = memberForm.querySelectorAll('input');
            inputs.forEach(input => input.value = '');
            const selects = memberForm.querySelectorAll('select');
            selects.forEach(select => select.selectedIndex = 0);

            document.getElementById('members').appendChild(memberForm);
        }
        $(document).ready(function () {
            // 模拟延迟加载效果
            setTimeout(() => {
                renderTicketTypes();
                renderTopListings();
                $('#loadingTop').remove(); // 移除 loading 动画
            }, 500);

            function renderTicketTypes() {
                let html = '';
                $.each(data.ticketTypes, function (index, ticket) {
                    html += `
          <div class="ticket-type">
            <span class="price-tag">${ticket.price}</span>
            ${ticket.type}
          </div>`;
                });
                $('#ticketTypesContainer').html(html);
            }

            function renderTopListings() {
                let html = '';
                $.each(data.topListings, function (index, listing) {
                    html += `
          <a href="#" data-toggle="modal" data-target="#registrationModal" class="list-group-item list-group-item-action">
            <div class="d-flex w-100 justify-content-between">
              <h5 class="mb-1">${listing.seatType}</h5>
              <small>${listing.soldDate}</small>
            </div>
            <p class="mb-1">${listing.oldPrice} Now ${listing.newPrice}</p>
            <small>${listing.note}</small>
          </a>`;
                });
                $('#topListingsContainer').html(html);
            }

            function renderOtherListings() {
                if (data.otherListings.length === 0) {
                    $('#otherListingsContainer').html('<p>No other listings available.</p>');
                    return;
                }
                let html = '';
                $.each(data.otherListings, function (index, listing) {
                    html += `...`;
                });
                $('#otherListingsContainer').html(html);
            }
        });
    </script>

</body>

</html>